<template>
	<div>
		<div style="display: flex;margin-bottom: 20px;">
			<el-input placeholder="请输入昵称或手机号" style="width: 200px;margin-right: 10px;" v-model="keyword"
				size="mini" clearable>
			</el-input>
			<el-button style="margin-left: 10px;" type="primary" size="mini" @click="searchs()">搜索</el-button>
		</div>
		<el-table ref="table"  :data="memberData" height="600px" border
			:default-sort="{prop: 'date', order: 'descending'}" header-cell-class-name="main-table-header"
			@selection-change="onSelectionChange" >
			<el-table-column type="selection" width="39"></el-table-column>
			<el-table-column align="center" label="客户名称" prop="name" />
			<el-table-column label="头像">
				<template slot-scope="{row}">
					<el-image style="width:60px;height:60px;border-radius: 100%" :src="row.wxPhotoURL"
						:preview-src-list="[row.wxPhotoURL]">
					</el-image>
				</template>
			</el-table-column>
			<!-- <el-table-column align="center" label="病历号" prop="medicalNo" /> -->
			<el-table-column align="center" label="电话号码" prop="mainPhone" />
			<!-- 是否核销员 0否 1是 -->
			<!-- <el-table-column label="核销员">
					    <template slot-scope="{row}">
							
					       <el-tag v-if="row.is_verifier==1">是</el-tag>
						  <el-tag v-if="row.is_verifier==0">否</el-tag>
					    </template>
					</el-table-column> -->
			<!-- <el-table-column
		                align="center"
		                label="会员等级"
		                prop="memberLevelName"
		            /> -->
			<!-- <el-table-column
		                align="center"
		                width="100px"
		                label="首次消费日期"
		                prop="firstCostDate"
		            />
		            <el-table-column
		                align="center"
		                width="100px"
		                label="最近消费日期"
		                prop="latestCostDate"
		            /> -->
			<el-table-column align="center" label="消费积分" prop="fScore" />
			<el-table-column align="center" label="消费次数" prop="costTime" sortable />
			<!-- <el-table-column
		                align="center"
		                width="100px"
		                label="今年消费金额"
		                prop="costThisYear"
		            /> -->
			<el-table-column align="center" label="消费总金额" prop="costAmount" sortable />
			<el-table-column align="center" label="余额" prop="balance" />
			<el-table-column align="center" label="积分" prop="integral" />
			<el-table-column align="center" label="分组名称" prop="group_name" />
			<!-- <el-table-column align="center" label="地区" prop="area" />
		            <el-table-column align="center" label="地址" prop="address" /> -->
			<!-- <el-table-column align="center" label="会员号" prop="vipNum" /> -->
			<el-table-column label="创建时间" prop="createtime">
				<template slot-scope="{row}">
					{{getTime(row.createtime)}}
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="page" :page-size="limit" :total="total"
			@current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
			<el-row type="flex" justify="center">
			    <el-button type="primary"  @click="confirm">
			        <span>确认</span>
			    </el-button>
			    <el-button type="default" @click="cancel">取消</el-button>
			</el-row>
	</div>

</template>

<script>
	import {
		imghttp,
		get,
		post,
		del
	} from '@/assets/js/http'
	// import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
	export default {
		name: "member-search",
		props: {
			formData: {
				type: Array,
				default: () => []
			},
		},
		components: {
			// "el-upload-image": () => import("@/components/el-upload-image.vue"),
			// "maps": () => import("@/components/map/index.vue"),
			// Editor,
			// Toolbar
		},
		mounted() {
			this.getMemberData() 
		},
		data() {
			return {
				memberData:[],
				total:0,
				limit:10,
				selection:[],
				page:1,
				keyword:'',
			};
		},
		beforeDestroy() {
			// const editor = this.editor;
			// if (editor == null) return;
			// editor.destroy();
		},
		methods: {
			async getMemberData() {
			    const data = await get({
			        url: "/admin/user.RealmeritUser/index",
			        loading: true,
			        params: {
			            page: this.page,
			            limit: this.limit,
						keyword:this.keyword,
			        }
			    });
			    const list = data.list;
			    this.total = data.total;
			    this.memberData = list;
				console.log(this.memberData,list)
			},
			searchs(){
				this.page = 1
				this.getMemberData()
			},
			getTime(time) {
				let date = new Date(time * 1000)
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				// 时分秒
				let hour = date.getHours()
				let minute = date.getMinutes()
				let second = date.getSeconds()
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`
			},
			onSelectionChange(selection) {
				console.log(selection,'selection')
			    this.selection = selection;
			},
			confirm(){
				this.$emit('sentcoupon', this.selection)
				this.selection = []
				 this.$refs.table.clearSelection();
				 this.$parent.$emit("update:visible", false);
				 // this.$refs.formRef.resetFields();
			},
			onCurrentChange(index) {
			    this.page = index;
			    this.getMemberData();
			},
			cancel() {
			    this.$parent.$emit("update:visible", false);
			    // this.$refs.formRef.resetFields();
			},
		}
	};
</script>
<!-- <style src="@wangeditor/editor/dist/css/style.css"></style> -->